<template>
	<view class="address">
		<top-back-navbar position="fixed" title="收货地址" background="#001b4d" color="#ffff"></top-back-navbar>
		<view class="content">
			<radio-group>
				<label class="list" v-for="item in res" :key="res.id">
					<view class="title">
						<text class="realname" v-cloak>{{item.realname}}</text>
						<text class="mobile" v-cloak>{{item.mobile}}</text>
						<view class="is-mr">
							<text v-if="item.isdefault" class="is-mr-btm">默认</text>
						</view>
					</view>
					<view class="text" v-cloak>
						{{item.province}}{{item.city}}{{item.area}}
					</view>
					<view class="text" v-cloak>
						{{item.street}}&nbsp;{{item.address}}
					</view>
					<view class="cont">
						<view class="radio-inline" @click="moren" :data-id="item.id">
							<radio :value="item.id" :checked="item.isdefault" color="#c5000b" />
							<text>设为默认</text>
						</view>
						<view class="pull-right">
							<view class="pull-right-edit" @tap="jump" :data-id="item.id">编辑</view>
							<view class="pull-right-del" @tap='del' :data-id="item.id">删除</view>
						</view>
					</view>
				</label>
			</radio-group>
		</view>
		<view style="padding: 80rpx 30rpx;">
			<button type="primary" style="background-color: #32539b; width:100%;border-radius: 60rpx;"
				@click="jump" :loading="loading">新增地址</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: [],
				openid: '',
				loading:false
			};
		},
		onLoad: function() {
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		onPullDownRefresh() {
			this.setAjax();
		},
		methods: {
			radioChange: function(e) {
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.address.setdefault&app=1&id=' +
						e.detail.value,
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						uni.hideLoading()
						uni.showToast({
							title: "设置成功"
						})
						var items = this.res;
						for (var i = 0, len = items.length; i < len; ++i) {
							items[i].checked = items[i].value == e.detail.value
						}
						this.res = items
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setAjax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.address&app=1',
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						uni.hideLoading()
						uni.stopPullDownRefresh();
						for (var i in res.data) {
							if (res.data[i].isdefault == 0) {
								res.data[i].isdefault = false
							} else {
								res.data[i].isdefault = true
							}
						}
						this.res = res.data
					},
					fail: () => {},
					complete: () => {}
				});

			},
			jump(e) {
				// event.stopPropagation();
				uni.navigateTo({
					url: 'post?id=' + e.currentTarget.dataset.id
				});
			},
			del(e) {
				// event.stopPropagation();
				uni.showModal({
					content: "是否删除地址",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if (res.confirm) {
							uni.showLoading()
							uni.request({
								url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.address.delete&app=1&id=' +
									e.currentTarget.dataset.id,
								method: 'POST',
								data: {
									'openid': this.openid
								},
								header: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								success: res => {
									uni.hideLoading()
									uni.showToast({
										title: "删除成功"
									})
									setTimeout(() => {
										uni.showLoading()
										this.setAjax()
									}, 500);
								},
								fail: () => {},
								complete: () => {}
							});

						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			moren(e) {
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.address.setdefault&app=1&id=' +
						e.currentTarget.dataset.id,
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						uni.hideLoading()
						this.setAjax()
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
	  background-color: #f2f5fa;
	}
	.address {
	  width: 100%;
	  height: 100vh;
	  ;
	  box-sizing: border-box;
	}
	.content{
		padding:30rpx;
	}
	.list {
		padding: 0;
		display: block;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);
		margin-bottom: 20rpx;
		padding:30rpx;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.realname,.mobile{
				font-size: 28rpx;
				font-weight: 600;
			}
			.is-mr{
				min-height: 10rpx;
				.is-mr-btm{
					padding:0 20rpx;
					font-size: 20rpx;
					color:#fff;
					border-radius: 30rpx;
					background-color: #c5000b;
				}
			}
		}
		.text {
			font-size: 26upx;
			color: #888;
			margin-top:4rpx;
		}
	}

	.cont {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top:20rpx;
		border-top:1px solid #f2f5fa;
		margin-top:20rpx;
		.radio-inline{
			display: flex;
			align-items: center;
			justify-content: center;
			radio{
				transform: scale(0.7,0.7);
			}
			text{
				color: #888;
				font-size: 26upx;
				margin-left: 10rpx;
			}
		}
		.pull-right{
			display: flex;
			align-items: center;
			view{
				padding:0 40rpx;
				font-size: 26rpx;
				border-radius: 30rpx;
			}
			.pull-right-edit{
				color:#666;
				border:1px solid #666;
				margin-right: 20rpx;
			}
			.pull-right-del{
				color:#c5000b;
				border:1px solid #c5000b;
			}
		}
	}

</style>
